
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<script type="text/javascript" src="<?php echo base_url() ?>bootstrap/markerwithlabel.js"></script>
<style type="text/css">  
/* css กำหนดความกว้าง ความสูงของแผนที่ */  
#map_canvas {   
    height:500px;  
    margin:auto; margin-left:20px; margin-right:20px;
/*  margin-top:100px;*/  
} 

   .labels {
     color: white;
     background-color: red;
     font-size: 10px;
     text-align: center;
     width: 50px;     
     white-space: nowrap;
   }
   
      .labels_blue {
     color: white;
     background-color:  blue;
     font-size: 10px;
     text-align: center;
     width: 50px;     
     white-space: nowrap;
   }
   
    
</style>
<div id="page-wrapper">
            <div class="row">
            <img src="<?php echo base_url() ?>bootstrap/tot/bnnr-eservice1.jpg" class="img-responsive" alt="Responsive image">
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            แผนที่ แสดงจุด Pon และ ลูกค้า
                        </div>
                        <div class="row">
                          
                            <div class="panel-body">
								<div id="map_canvas"></div> </br>
     
                            </div><!-- /.row -->
                        </div><!--panel body-->
                    </div><!--panel primary-->     
                </div><!---clo-lg-12--> 
            </div><!--row-->
</div>      <!-- /#page-wrapper -->
<script type="text/javascript">  
var map;
var GGM;
var my_Marker;
var infoWindows = [];

function initialize() {
    GGM=new Object(google.maps); 

    // กำหนดจุดเริ่มต้นของแผนที่  
    var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);  
	
    var my_DivObj=$("#map_canvas")[0];   
    // กำหนด Option ของแผนที่  
    var myOptions = {  
        zoom: 10, 
        center: my_Latlng,
        mapTypeId: GGM.MapTypeId.HYBRID 
    };  
    map = new GGM.Map(my_DivObj,myOptions);
      
	  /*
    my_Marker = new GGM.Marker({ 
        position: my_Latlng, 
        map: map,
        draggable:false,
    }); 
	*/
	setMarkersCus(map, cus);
	setMarkersPon(map, pon);
}  

var cus = [
	<? foreach($customer as $rs){ if($rs->latitude) { $i++; ?>
  ['<?=$rs->cm_code;?>', <?=$rs->latitude;?>,<?=$rs->longtitude;?>, <?=$i;?>, '<? echo "<b>รหัสลูกค้า :</b> {$rs->cm_code}<br/><b>ชื่อ-สกุล :</b> {$rs->cm_titlename}{$rs->cm_fname} {$rs->cm_lname}<br/><b>รหัสติดตั้ง :</b> {$rs->cm_lineid}<br/><a href=\"".base_url()."index.php/admin/customer/profile/{$rs->cm_id}\">รายละเอียด</a>";?>'],
  <? }} ?>
];

function setMarkersCus(map, locations) {

  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new GGM.LatLng(beach[1], beach[2]);
    var marker = new MarkerWithLabel({
        position: myLatLng,
        map: map,
        icon: "<?php echo base_url() ?>bootstrap/icon/cus.png",
        shape: shape,
        title: beach[0],
        zIndex: beach[3],
		animation: GGM.Animation.DROP,
		raiseOnDrag: true,
		labelContent: beach[0],
       labelAnchor: new google.maps.Point(0, 0),
       labelClass: "labels_blue", // the CSS class for the label
       labelInBackground: false
    });
	
	attachSecretMessage(marker , beach[4]);	
  }
}


var pon = [
	<? foreach($pon as $rs){ if($rs->pon_latitude) { $i++; ?>
  [' <?=$rs->pon_code;?>', <?=$rs->pon_latitude;?>,<?=$rs->pon_longtitude;?>, <?=$i;?>, '<? echo "<b>PON Code :</b> {$rs->pon_code}<br/><b>ชื่อ :</b> {$rs->pon_name}<br/><b>ODF :</b> {$rs->pon_odf}<br/><a href=\"".base_url()."index.php/admin/pon/profile/{$rs->pon_id}\">รายละเอียด</a>";?>'],
  <? }} ?>
];

function setMarkersPon(map, locations) {

  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new GGM.LatLng(beach[1], beach[2]);
    var marker = new MarkerWithLabel({
        position: myLatLng,
        map: map,
        icon: "<?php echo base_url() ?>bootstrap/icon/pon.png",
        shape: shape,
        title: beach[0],
        zIndex: beach[3],
		animation: GGM.Animation.DROP,
	   raiseOnDrag: true,
       labelContent: "Pon: "+beach[0],
       labelAnchor: new google.maps.Point(0, 20),
       labelClass: "labels", // the CSS class for the label
       labelInBackground: false
    });
	
	attachSecretMessage(marker , beach[4]);
	
  }
}


function attachSecretMessage(marker,content) {
	
  var infowindow = new GGM.InfoWindow({
    content: content
  });

  GGM.event.addListener(marker, 'click', function() {
	closeAllInfoWindows();
    infowindow.open(marker.get('map'), marker);
  });
  
  infoWindows.push(infowindow);
}

function closeAllInfoWindows() {
  for (var i=0;i<infoWindows.length;i++) {
     infoWindows[i].close();
  }
}

google.maps.event.addDomListener(window, 'load', initialize);




$(function(){

	
});


</script>  
